<template>
    <div class="wrapper">
        <!--待付款-->
        <div v-if="order.status=='待付款'" class="btn">
            <order-button :width="width" :height="height" :fontSize="fontSize" @btnClick="cancelOrder()">取消订单</order-button>
            <order-button :width="width" :height="height" :fontSize="fontSize" borderColor="#e31336" color="#e31336" @btnClick="goToPay()">去支付</order-button>
        </div>
        <!--/待付款-->

        <!--待发货-->
        <div v-if="order.status=='待发货'" class="btn">
            <order-button :width="width" :height="height" backgroundColor="transparent" :fontSize="fontSize" borderWidth=0>正在出仓</order-button>
        </div>
        <!--/待发货-->

        <!--待收货-->
        <div v-if="order.status=='待收货'" class="btn">
            <order-button v-if="order.can_delay != 0" :width="width" :height="height" :fontSize="fontSize" @btnClick="delayOrder()">延长收货</order-button>
            <order-button :width="width" :height="height" :fontSize="fontSize" @btnClick="getLogistic()">查看物流</order-button>
            <order-button :width="width" :height="height" :fontSize="fontSize" borderColor="#e31336" color="#e31336" @btnClick="conformOrder()">确认收货</order-button>
        </div>
        <!--/待收货-->

        <!--已完成-->
        <div v-if="order.status=='已完成'" class="btn">
            <order-button :width="width" :height="height" :fontSize="fontSize" @btnClick="getLogistic()">查看物流</order-button>
            <order-button v-if="order.is_rate==0" :width="width" :height="height" :fontSize="fontSize" borderColor="#e31336" color="#e31336" @btnClick="rateOrder()">评价</order-button>
            <order-button :width="width" :height="height" :fontSize="fontSize" @btnClick="delOrder()">删除订单</order-button>
        </div>
        <!--/已完成-->

        <!--交易关闭-->
        <div v-if="order.status=='交易关闭'" class="btn">
            <order-button :width="width" :height="height" :fontSize="fontSize" @btnClick="delOrder()">删除订单</order-button>
        </div>
        <!--/交易关闭-->

        <wheel-item :itemList="itemList" :isShow="isShow" @getValue="choiceClick"></wheel-item>
    </div>
</template>
<style scoped>
    .wrapper {
        flex: 1;
        align-items: stretch;
    }
    .btn {
        flex: 1;
        padding-right: 30px;
        padding-left: 30px;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
</style>
<script>
    import orderButton from 'components/btn-item/order-btn.vue';
    import wheelItem from "components/wheel-items/wheel-items.vue";
    import api from "api/api";
    import navigator from "utils/navigator";
    import route from 'constants/route';
    import constant from 'constants/constant';
    import modal from "utils/modal";

    const itemList = [
        "我不想买了",
        "信息填写错误，重新拍",
        "卖家缺货",
        "同城见面交易",
        "其他"
    ];
    export default{
        props: {
            order: {
                type: Object,
                default: {},
                required: true
            },
            width: {
                type: Number,
                default: 180
            },
            height: {
                 type: Number,
                default: 50
            },
            fontSize: {
                type: Number,
                default: 26
            }
        },
        data(){
            return{
                itemList: itemList,
                isShow: false
            }
        },
        components:{
            'order-button': orderButton,
            'wheel-item': wheelItem
        },
        methods: {
            cancelOrder(){ //取消订单
                this.isShow = true;
            },
            goToPay(){ //去支付
                let self = this;
                api.sendHttp("orderPayApi",{oid: self.order.transactionid}).then(res=>{
                        let payid = res.data.payid;
                        let payMoney =res.data.pay_money;

                         navigator.push({
                            classType: constant.Drawer_Class_Type,
                            url: route.cash,
                            title: "收银台",
                            params: {
                                payId: payid,
                                oid: self.order.transactionid
                            }
                        });
                    },
                    res=>{
                        modal.toast(res.msg || "付款页面生成失败");
                    });
            },
            delayOrder(){ //延长收货
                let self = this;
                modal.confirm({message: '亲，确认延长收货时间吗？每笔订单只能延长一次哦！'}).then(res=>{
                    api.sendHttp("logisticDelayApi",{oid: self.order.transactionid}).then(res=>{
                         modal.toast("收货时间延长成功");
                         self.$emit("updateOrder",res.data);
                    },
                    res=>{
                        modal.toast(res.msg || "延长收货失败");
                    });
                });
            },
            getLogistic(){ //查看物流
                let self = this;
                let order = self.order;

                if (order.logistics.logistics_without == 1) {
                    modal.toast("该订单由商家配送，无物流信息");
                    return;
                }

                let params = {
                    cname: order.logistics.logistics_name,
                    nu: order.logistics.logistics_num
                };

                api.sendHttp("getLogisticApi",params).then(res=>{
                    let options = {
                        classType: constant.Logistic_Class_Type,
                        params: {
                            url: res.data.url,
                            cname: res.data.cname,
                            cno: res.data.cno,
                        }
                    };
                    navigator.push(options);
                },
                res=>{
                    modal.toast(res.msg || "查看物流信息失败");
                });
            },
            conformOrder(){ //确认收货
                let self = this;
                modal.confirm({message: '确认收货前，请确认收到商品并且商品质量没有问题，如有问题，请取消该操作!'}).then(res=>{
                    api.sendHttp("orderConfirmApi",{oid: self.order.transactionid}).then(res=>{
                        self.$emit("updateOrder",res.data);
                    },
                    res=>{
                        modal.toast(res.msg || "确认收货失败");
                    });
                });

            },
            rateOrder(){ //评价订单
                let self = this;
                let options = {
                    classType: constant.Drawer_Class_Type,
                    url: route.order_evaluate,
                    title: "评价",
                    params: {
                        oid: self.order.transactionid
                    }
                };
                navigator.push(options);
            },
            delOrder(){ //删除订单
                let self = this;
                modal.confirm({message: '亲，确认要删除订单吗？'}).then(res=>{
                    api.sendHttp("orderDeleteApi",{oid: self.order.transactionid}).then(res=>{
                        self.$emit("delOrder",self.order);
                    },
                    res=>{
                        modal.toast(res.msg || "删除订单失败");
                    });
                });

            },
            choiceClick(item){
                let self = this;
                api.sendHttp("orderCancelApi",{oid: self.order.transactionid,canceltext: item}).then(res=>{
                    self.$emit("updateOrder",res.data);
                    modal.toast(res.msg || "取消成功");
                    this.isShow = false;
                },
                res=>{
                    modal.toast(res.msg || "取消订单失败");
                });
            }
        }
    }
</script>
